<!DOCTYPE html>
<html>
<head>
    <title>益多多回收</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="${s.base}/mobile/css/weui.min.css">
    <link rel="stylesheet" href="${s.base}/mobile/css/jquery-weui.min.css">
    <link rel="stylesheet" href="${s.base}/mobile/css/base.css">
    <link rel="stylesheet" href="${s.base}/mobile/css/component.css">
    <style type="text/css">
		body,html{background: #F6F6F6;}
        .xyg-desc{width: 90%; margin: 20px 3%; padding: 10px 2%; border:1px solid #e3e3e3; text-align: left; line-height:35px; font-size: 24px;display:none;}
        .selectdesc-active{ display: block;}
		.xyg-type-three{width:100%; height:auto; background:#ffffff;}
		.xyg-type-three .xyg-type-item{width:26%; margin-left:5.5%; height:auto; padding-top:1.5rem; line-height:3.5rem; text-align:center; float:left; font-size:32px; color:#00000;}
		.xyg-type-three .xyg-type-item:nth-child(3){margin-right:5.5%; }
		.xyg-type-three .xyg-type-item .xyg-type-item-pic{width:100%; height:4rem; text-align:center;}
		.xyg-type-three .xyg-type-item .xyg-type-item-pic img{width:auto; margin:0px auto; height:4rem; text-align:center;}
		.xyg-type-three .xyg-type-item .xyg-type-item-text{width:100%; height:2.5rem; line-height:2.5rem; text-align:center;font-size:28px; color:#00000;}
		.xyg-type-three .select-active{ border-bottom:3px solid #09C15F;}
		
		.xyg-form{width:100%; height:auto;}
		.xyg-form .xyg-form-three-item,.xyg-form .xyg-form-three-head{width:96%;padding:0px 2%; margin:0.2rem 0px; height:auto;}
		.xyg-form .xyg-form-three-head{ background:#ffffff;}
		.xyg-form .xyg-type-item{width:50%; height:70px; line-height:70px; float:left; text-align:center;}
		.xyg-form .xyg-type-item .xyg-type-item-add{width:120px; margin:13px auto; text-align:center; height:44px;line-height:44px; color:#ffffff; background:#09C15F; }
		.xyg-form .xyg-type-item .xyg-type-item-del{width:120px; margin:13px auto; text-align:center; height:44px;line-height:44px; color:#ffffff; background:#FF0000; }
    </style>
</head>
<body>
<!-- 废品价格 -->
<div class="xyg-type-three">
    <#list recoveryLargeCatList as recoveryLargeCat>
    <div class="xyg-type-item <#if recoveryLargeCat_index == 0> select-active</#if>" data-id="${recoveryLargeCat.id}">
        <div class="xyg-type-item-pic">
            <img src="${recoveryLargeCat.icon}"/>
        </div>
        <div class="xyg-type-item-text ">
            ${recoveryLargeCat.name}
        </div>
    </div>
    </#list>
    <div class="clearBoth"></div>
</div>
<#list recoveryLargeCatList as recoveryLargeCat>
<div class="xyg-desc xyg${recoveryLargeCat.id} <#if recoveryLargeCat_index == 0> selectdesc-active </#if>" >
    ${recoveryLargeCat.description}
</div>
</#list>
<div class="xyg-form margin-top-05rem">
    <div class="xyg-form-three-head">
        <div class="xyg-type-item">
            废品类型
        </div>
        <div class="xyg-type-item">
            最新价格
        </div>
        <div class="clearBoth"></div>
    </div>

    <div id="showList">
        <#list recoveryMiddleCatList as recoveryMiddleCat>
        <div class="xyg-form-three-item">
            <div class="xyg-type-item">
                ${recoveryMiddleCat.name}
            </div>
            <div class="xyg-type-item">
                <#if recoveryMiddleCat.price??>
                ${recoveryMiddleCat.price}${recoveryMiddleCat.ratePriceName}
                <#else>
                0${recoveryMiddleCat.ratePriceName}
                </#if>
            </div>
            <div class="clearBoth"></div>
        </div>
        </#list>
    </div>
</div>

</body>
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script src="${s.base}/mobile/js/jquery-2.1.4.js"></script>
<script src="${s.base}/mobile/js/jquery-weui.js"></script>
<script src="${s.base}/mobile/fonts/iconfont.js"></script>
<script src="${s.base}/mobile/js/component.js"></script>
<script src="${s.base}/mobile/js/base.js"></script>


<!--js分享代码开始-->
<input type="hidden" value="${jSTicketShareResponse.appid}" id="appid" />
<input type="hidden" value="${jSTicketShareResponse.fxTitle}" id="fxTitle" />
<input type="hidden" value="${jSTicketShareResponse.fxImgUrl}" id="fxImgUrl" />
<input type="hidden" value="${jSTicketShareResponse.fxDesc}" id="fxDesc" />
<input type="hidden" value="${jSTicketShareResponse.fxUrl}" id="fxUrl" />
<input type="hidden" value="${jSTicketShareResponse.nonceStr}" id="nonceStr" />
<input type="hidden" value="${jSTicketShareResponse.timestamp}" id="timestamp" />
<input type="hidden" value="${jSTicketShareResponse.signature}" id="signature" />
<script src="${s.base}/mobile/js/share.js"></script>
<script type="text/javascript">
    $(".xyg-type-three .xyg-type-item").bind("click", function () {
        var id = $(this).attr("data-id");
        $(".xyg-type-three .xyg-type-item").removeClass("select-active");
        $(this).addClass("select-active");
        $(".xyg-desc").removeClass("selectdesc-active");
        $(".xyg"+id).addClass("selectdesc-active");
        console.log(id)
        acceptMiddleCat(id);
    });

    function acceptMiddleCat(id) {
        // 直接替换
        $.post("/phone/recoveryMiddleCatJsonList",{
            largeCatId : id
        },function(resultInfo){
            if (resultInfo.code == 0){
                if (resultInfo.data!=null && resultInfo.data.length > 0){
                    var content= '';
                    for(var i=0;i<resultInfo.data.length;i++){
                        var middleCat = resultInfo.data[i];
                        var price = middleCat.price;
                        if (price == null || price == "") {
                            price = 0;
                        }
                        price+=middleCat.ratePriceName;
                        content+='<div class="xyg-form-three-item">\
                            <div class="xyg-type-item">\
                            '+middleCat.name+'\
                            </div>\
                            <div class="xyg-type-item">\
                            '+price+'</div>';

                        content+='<div class="clearBoth"></div>\
                            </div>';

                        loading = false;
                        if(!resultInfo.hasNextPage){
                            $(document.body).destroyInfinite();
                        }
                    }
                    content+='<div class="clearBoth"></div>';
                    $("#showList").html(content);
                } else {
                    $("#showList").html("");
                }
            }
        },"json");
    }
</script>
</html>
